/*
 * @Author       : 吴豪
 * @Date         : 2021-12-4 15:56:22
 * @FilePath     : \book-manage-front\src\pages\classificationManage\classificationComponents\CreateClassification.tsx
 * @Description  : 新增分类模态框
 */

import {
  checkClassificationNameExist,
  getFatherClassificationList,
  saveClassificationInfo,
} from '@/services/classification';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, { ProFormSelect, ProFormText } from '@ant-design/pro-form';
import { message, Modal } from 'antd';
import React, { useRef, useState } from 'react';

type LayoutType = Parameters<typeof ProForm>[0]['layout'];

/**
 * 新增分类模态框，将父级传来的数据结构，并实现新增分类功能
 * @param props
 * @returns
 */
const CreateClassification = (props: {
  isModalVisible?: any;
  isShowModal?: any;
  actionRef?: any;
}) => {
  const { isModalVisible } = props;
  const { isShowModal } = props;
  const { actionRef } = props;
  const [btn, setBtn] = useState<boolean>(false);
  const [formLayoutType] = useState<LayoutType>('horizontal');

  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
  };

  /**
   * 新增分类
   */
  const formRef = useRef<
    ProFormInstance<{
      aid: number;
      name: string;
      fatherAid?: number;
    }>
  >();
  const handleOk = async () => {
    const data = await formRef.current?.validateFields();
    const param = {
      aid: -1,
      name: data?.name || '',
      fatherAid: data?.fatherAid || -1,
    };
    const response = await saveClassificationInfo(param);
    if (response) {
      message.success('新增成功！');
      isShowModal(false);
      actionRef.current.reload();
    } else {
      message.error('新增失败！');
    }
  };
  return (
    <Modal
      destroyOnClose
      title="新增"
      width="649px"
      visible={isModalVisible}
      onOk={handleOk}
      okButtonProps={{ disabled: btn }}
      onCancel={() => {
        if (btn) {
          setBtn(false);
        }
        isShowModal();
      }}
    >
      <ProForm
        formRef={formRef}
        submitter={{
          submitButtonProps: {
            style: {
              display: 'none',
            },
          },
          resetButtonProps: {
            style: {
              display: 'none',
            },
          },
        }}
        {...layout}
        layout={formLayoutType}
        params={{}}
      >
        <ProFormText
          name="name"
          label="名称"
          placeholder="请输入"
          //分类名称的唯一性校验
          fieldProps={{
            onBlur: async (event) => {
              const name = event.target.value;
              if (name) {
                const params = {
                  aid: -1,
                  name,
                };
                const response = await checkClassificationNameExist(params);
                if (response.isExist) {
                  message.error('该分类名称已经存在！！');
                  setBtn(true);
                } else {
                  setBtn(false);
                }
              }
            },
          }}
          rules={[{ required: true, message: '请输入名称' }]}
        />
        <ProFormSelect
          name="fatherAid"
          label="父级分类"
          placeholder="请输入"
          request={async () => {
            const data = await getFatherClassificationList();
            return data.map((item: { name: any; aid: any }) => {
              return {
                label: item.name,
                value: item.aid,
              };
            });
          }}
        />
      </ProForm>
    </Modal>
  );
};

export default CreateClassification;
